<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
    <div class="content">
        <div id="list">
            <img src="images/01.png" alt="banner01" class="first">
            <img src="images/02.png" alt="banner02">
            <img src="images/03.png" alt="banner03">
            <img src="images/04.png" alt="banner04">
            <img src="images/05.png" alt="banner05">
        </div>
        <button id="prev"></button>
        <button id="next"></button>
        <div id="btn-group">
            <span class="on"></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <script>
        $(function(){
            let index = 0;
            //1.点击右手边的按钮显示下一张图片
            $("#next").click(function(){
                index++;
                if(index>4){
                    index=0;
                }
                console.log(index);
                show(index)
            })
            //2.点击左手边的按钮显示上一张图片 index-- index:0 此时为数组最后面的值
            $("#prev").click(function(){
                index--;
                if(index<0){
                    index = $("#list img").length-1;
                }
                console.log(index);
                show(index)
            })
            //4.点击焦点换图
            $("#btn-group span").click(function(){
                let i = $(this).index();
                console.log(i);
                //5.点击焦点后需要重置index值
                index = i
                show(i)
            })
            //6.封装
            function show(index){
                $("#list img").eq(index).show().siblings().hide();
                $("#btn-group span").eq(index).addClass("on").siblings().removeClass("on");
            }
            function play(){
                time = setInterval(function () {                                    
                $("#next").click()
                },1000); //定时器 重复
            }
            function stop() {
                clearInterval(time)
            }//停止自动切换
            $(".content").mouseover(function(){
                stop();
            })
            $(".content").mouseout(function(){
                play();
            })
            play();
        })
    </script>
</body>
</html>